<template>
  <div v-if="listPageType" class="box">
    <img v-if="listPageType === '暂无数据'" style="width: 300px; height: 300px" src="~@/assets/images/empty.png" />
    <img
      v-if="listPageType === '暂无搜索结果'"
      style="width: 300px; height: 300px"
      fit="contain"
      src="~@/assets/images/searchempty.png"
    />
    <img
      v-if="listPageType === '网络异常'"
      style="width: 300px; height: 300px"
      fit="contain"
      src="~@/assets/images/neterror.png"
    />
    <div class="title">{{ listPageType }}</div>
  </div>
</template>
<script>
export default {
  name: 'MEmpty',
  data() {
    return {
      listPageType: '',
    }
  },
  methods: {
    countListPageType(list, error, search) {
      if (list.length === 0 && search) {
        this.listPageType = '暂无搜索结果'
        return
      }
      if (list.length === 0 && error) {
        this.listPageType = '网络异常'
        return
      }
      if (list.length === 0) {
        this.listPageType = '暂无数据'
        return
      }
      this.listPageType = ''
    },
  },
}
</script>
<style lang="scss" scoped>
.box {
  height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #ffffff;
  box-shadow: 0px 5px 10px 0px #f1f2fa;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
}
.title {
  margin-top: -30px;
  height: 24px;
  font-size: 14px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 24px;
}
</style>
